Media Queries Demo

1. Evolucija weba


Kako su se web stranice nekada prikazivale na mobilnim uređajima, a što se koristi danas kako bi se izbjeglo postojanje više verzija iste stranice?
Nisu stale u ekran i danas se koriste fleksibilni dizajni Objasni razliku između fiksnog i fluidnog rasporeda. Što se događa s elementima kada smanjimo ekran kod fluidnog rasporeda?
Fiksni ima unaprijed zadanu širinu i ne prilagođava se veličini ekrana. Fluidni koristi relativne jedinice i prilagođava se širini ekrana. Koji pristup pruža najveću kontrolu izgleda stranice na svim uređajima (kombinacija fluidnog rasporeda i CSS media queries)?
Najveću kontrolu pruža responzivni dizajn, koji kombinira fluidni raspored i CSS media queries.


2. Tehnička postavka (Viewport)


to je viewport i zašto je manji na mobilnom telefonu?
Viewport je vidljivo područje web stranice u pregledniku. Na mobilnom telefonu je manji jer mobilni uređaji imaju manje fizičke dimenzije ekrana u odnosu na računala. HTML linija koda (tag) za prilagodbu širini uređaja Što kontrolira naredba initial-scale=1.0?
Ona određuje početnu razinu zumiranja stranice kada se učita, vrijednost 1.0 označuje originalnu veličin bes uvečavanja ili smanjivanja

3. Breakpointi (Točke prekida)

Standardne širine zaslona za prilagodbu dizajna:
Uređaj
Širina zaslona
Mali mobiteli
do 480 px
Mobiteli
do 768 px
Tableti
do 1024 px
Laptopi / Desktopi
1200 px i više

4. Mjerne jedinice

Fiksne mjere u CSS-u (primjeri):
px (piksel)
cm
mm
Varijabilne mjere za responzivnost:
%
vw / vh
em / rem
Kada koristiti fiksne, a kada varijabilne mjere?
Fiksne mjere koriste se kada je potrebna precizna i nepromjenjiva veličina (npr. ikone, obrubi).
Varijabilne mjere koriste se kod layouta i teksta kako bi se dizajn prilagođavao različitim veličinama ekrana.